<!--
 * @Descripttion: 商品列表
 * @version: 
 * @Author:Hui
 * @Date: 2023-04-28 15:11:19
 * @LastEditTime: 2023-11-16 21:21:59
 * @LastEditors: sueRimn
-->


<template>
  <view class="product_list">
    <product-item
      v-for="item in products"
      :item="item"
      :key="item.productId"
      @onClick="$emit('onClick', item)"
    />
    <view
      class="no_data"
      v-if="!loading"
      v-show="!loading&&!products.length"
    >
      <view class="icon bg-default" />
      <view class="text">抱歉，没有找到“{{searchKey}}”相关的信息</view>
    </view>
  </view>
</template>


<script>
import productItem from './productItem.vue'


export default {
  name: 'search-searchProductList',
  components: { productItem },
  props: {
    products: { type: Array, default: [] },
    loading: { type: Boolean, default: false },
    searchKey: { type: String, default: '' },
  }
}
</script>

<style lang="scss" scoped>
.product_list{
  padding: 0 30rpx;
}


.no_data{
  padding-top: 90rpx;

  .icon{
    width: 307rpx;
    height: 309rpx;
    background-image: url(@/static/images/icon/empty.png);
    margin: 0 auto;
    background-size: 100%;
  }
  .text{
    padding: 40rpx 0;
    font-size: 22rpx;
    font-weight: 500;
    color: #999999;
    line-height: 38rpx;
    text-align: center;
  }
}
</style>